<template>
  <div class="index-img">
    <el-row :gutter="10">
      <el-col :xl="6" :lg="8" :md="12" :sm="24" style="margin-bottom: 10px">
        <el-card shadow="always">
          <div class="w-desc">
            <div class="icon-num">
              <i class="iconfont iconyonghu" style="color: #f36d3c"></i>
              <div class="num">123456</div>
            </div>
            <div class="w-detail">
              <!-- <router-link :to="userRouter">
                <span class="name">明细</span>
                <i class="el-icon-arrow-right"></i>
              </router-link> -->
            </div>
          </div>
          <div class="num-desc">用户数量</div>
          <div class="w-count">
            <div class="w-count-type">
              <div class="w-count-type-num">200</div>
              <div class="w-count-type-name">今日</div>
            </div>
            <div class="w-count-type">
              <div class="w-count-type-num">300</div>
              <div class="w-count-type-name">昨日</div>
            </div>
            <div class="w-count-type">
              <div class="w-count-type-num">4000</div>
              <div class="w-count-type-name">本周</div>
            </div>
            <div class="w-count-type">
              <div class="w-count-type-num">25万</div>
              <div class="w-count-type-name">本月</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xl="6" :lg="8" :md="12" :sm="24" style="margin-bottom: 10px">
        <el-card shadow="always">
          <div class="w-desc">
            <div class="icon-num">
              <i class="iconfont iconchongzhijine" style="color: #0091ff"></i>
              <div class="num">201250000</div>
            </div>
            <div class="w-detail">
              <!-- <router-link :to="rechargeRouter">
                <span class="name">明细</span>
                <i class="el-icon-arrow-right"></i>
              </router-link> -->
            </div>
          </div>
          <div class="num-desc">充值金额</div>
          <div class="w-count">
            <div class="w-count-type">
              <div class="w-count-type-num">5000</div>
              <div class="w-count-type-name">今日</div>
            </div>
            <div class="w-count-type">
              <div class="w-count-type-num">4万</div>
              <div class="w-count-type-name">昨日</div>
            </div>
            <div class="w-count-type">
              <div class="w-count-type-num">45万</div>
              <div class="w-count-type-name">本周</div>
            </div>
            <div class="w-count-type">
              <div class="w-count-type-num">2003万</div>
              <div class="w-count-type-name">本月</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xl="6" :lg="8" :md="12" :sm="24" style="margin-bottom: 10px">
        <el-card shadow="always">
          <div class="w-desc">
            <div class="icon-num">
              <i class="iconfont icondingdan" style="color: #6236ff"></i>
              <div class="num">1052</div>
            </div>
            <!-- <div class="w-detail">
              <router-link :to="orderRouter">
                <span class="name">明细</span>
                <i class="el-icon-arrow-right"></i>
              </router-link>
            </div> -->
          </div>
          <div class="num-desc">订单数量</div>
          <div class="w-count">
            <div class="w-count-type">
              <div class="w-count-type-num">10</div>
              <div class="w-count-type-name">今日</div>
            </div>
            <div class="w-count-type">
              <div class="w-count-type-num">10</div>
              <div class="w-count-type-name">昨日</div>
            </div>
            <div class="w-count-type">
              <div class="w-count-type-num">10</div>
              <div class="w-count-type-name">本周</div>
            </div>
            <div class="w-count-type">
              <div class="w-count-type-num">10</div>
              <div class="w-count-type-name">本月</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup></script>
<style scoped>
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}
.teacher-h {
  height: 130px;
}
.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(100, 213, 114);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.user-info-cont {
  padding-left: 30px;
  flex: 1;
  font-size: 14px;
  color: #999;
}
.user-info-cont .user-info-name {
  font-size: 30px;
  color: #aaa;
  text-shadow: 0px 3px 4px #fffe42;
}
.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 10px;
}

.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.schart {
  width: 100%;
  height: 300px;
}

.index-img {
  width: 100%;
  /* height: 100%; */
}
.img-test {
  width: 100%;
  height: 100%;
  /* margin: auto; */
}
.user-info-name {
  margin-bottom: 10px;
}

.course-class {
  display: inline-block;
  /* float: left; */
  margin: 5px;
  padding: 5px;
  background: rgb(100, 213, 114);
  color: #fff;
  /* border: 1px solid red; */
  border-radius: 5px;
}
.course-class-no {
  background: #666;
}
.handle-box {
  margin-bottom: 20px;
}

/* 卡片中统计样式 start */
.w-desc {
  display: flex;
  justify-content: space-between;
}

.w-desc .icon-num {
  display: flex;
  align-self: start;
  /* justify-content: space-between; */
}

.w-desc .icon-num .iconfont {
  font-size: 30px;
  margin-right: 12px;
}

.w-desc .icon-num .num {
  font-size: 24px;
  font-weight: bold;
  color: #332019;
}

.w-detail .name {
  margin-right: 7px;
  font-size: 12px;
  color: #665853;
}

.num-desc {
  margin-left: 40px;
  margin-bottom: 72px;
  color: #665853;
}

.w-count {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.w-count-type {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.w-count-type .w-count-type-num {
  font-size: 18px;
  color: #332019;
}

.w-count-type .w-count-type-name {
  font-size: 12px;
  color: #988f8c;
}

/* 卡片中统计样式 end */
</style>
